<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./font_3308494_934masr8ypw/iconfont.js"></script>
    <style>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}    
body{	
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;    
}
ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
        /*局部导航栏*/
.local-nav{
    margin-top: 30px;
	height: 64px;	
	border-radius:8px;
	background-color: rgb(216, 238, 195);
	display: flex;
	box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
.local-nav li{
	flex: 1;
	text-align: center;
	font-size: 13px;
	color: #222;
}
.local-nav li span{
	display: block;
	width: 40px;
	height: 30px;
	/* background:url(./images/nav.png) no-repeat; */
	/* background-size:40px auto; */
	margin: 5px auto;
	cursor: pointer;
}
.local-nav li:nth-child(2) span{
		/* background:url(./images/nav.png) no-repeat 0 -40px; */
		background-size:40px auto;
}
.local-nav li:nth-child(3) span{
		background:url(./images/nav.png) no-repeat 0 -80px;
		background-size:40px auto;
}
.local-nav li:nth-child(4) span{
		background:url(./images/nav.png) no-repeat 0 -120px;
		background-size:40px auto;
}
.local-nav li:nth-child(5) span{
		background:url(./images/nav.png) no-repeat 0 -160px;
		background-size:40px auto;
}



/*主体导航栏*/
nav{
	border-radius:8px;
	margin:8px 12px 1px;
	overflow: hidden;
}
a{
	text-decoration: none;
}
nav .nav-common{
	height: 88px;
	background:linear-gradient(to right,#fa5a55,#fa994d);
	display: flex;
}
nav .nav-common:nth-child(2){
	margin: 1px 0;
	background:linear-gradient(to right,#4b90ed,#53bced);
}
nav .nav-common:nth-child(3){
	background:linear-gradient(to right,#34c2a9,#6cd559);
}
nav .nav-common .nav-items{
	flex: 1;
}
nav .nav-common .nav-items:nth-child(1){
	flex: 1.5;
}
nav .nav-common :nth-child(-n+3){
	border-right:1px solid #fff;
}
nav .nav-common:nth-child(1) :nth-child(3){
	flex: 2;
	background-image:linear-gradient(to right, rgb(255,190,74),rgb(255,209,82));
}
nav .nav-common:nth-child(1) .nav-items:nth-child(1)  a{
    margin-left: 15px;
	justify-content: flex-start;
	background:url(./images/hotel.png) no-repeat right bottom;
	background-size: 73px auto;
}
.nav-common .nav-items a{
	color: #fff;
	border: 0;
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: center;
	font-size: 14px;
}
nav .nav-common:nth-child(1) .nav-items:nth-child(2)  a{
	background:url(./images/hotel2.png) no-repeat left bottom;
	background-size: 37px auto;
}
nav .nav-common:nth-child(1) .nav-items:nth-child(3)  a{
	background: url(./images/airport.png) no-repeat right bottom;
	background-size: 86px auto;
	color: #a05416;
}
nav .nav-common:nth-child(2) .nav-items:nth-child(1)  a{
	margin-left: 15px;
	justify-content: flex-start;
	background:url(./images/plane.png) no-repeat right bottom;
	background-size: 79px auto;
}
nav .nav-common:nth-child(2) .nav-items:nth-child(2)  a{
	background:url(./images/train.png) no-repeat left bottom;
	background-size: 37px auto;
}
nav .nav-common:nth-child(3) .nav-items:nth-child(1)  a{
	margin-left: 15px;
	justify-content: flex-start;
	background:url(./images/travel.png) no-repeat right bottom;
	background-size: 93px auto;
}
nav .nav-common:nth-child(3) .nav-items:nth-child(2)  a{
	background:url(./images/travel2.png) no-repeat left bottom;
	background-size: 61px auto;
}

.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
    </style>
</head>
<body>
    <!-- 局部导航 -->
	<ul class="local-nav">
		<li>
			<span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-lvyougonglve"></use>
                </svg>
        </span>
			攻略·景点
		</li>
		<li>
			<span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-menpiao"></use>
                </svg>
            </span>
			门票·玩乐
		</li>
		<li>
			<span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-meishi"></use>
                </svg>
            </span>
			美食林
		</li>
		<li>
			<span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhoubianyou"></use>
                </svg>
            </span>
			周边游
		</li>
		<li>
			<span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-lvyouguanguang"></use>
                </svg>
            </span>
			一日游
		</li>
	</ul>


    <!-- 主体导航栏 -->
	<nav>
		<div class="nav-common">
			<div class="nav-items">
				<a href="#" title="酒店">酒店</a>
			</div>
			<div class="nav-items">
				<a href="#" title="民宿·客栈">民宿·客栈</a>
			</div>
			<div class="nav-items">
				<a href="#" title="机票/火车票+酒店">机票/火车票+酒店</a>
			</div>
		</div>
		<div class="nav-common">
			<div class="nav-items" title="机票">
				<a href="#">机票</a>
			</div>
			<div class="nav-items" title="火车票">
				<a href="#">火车票</a>
			</div>
			<div class="nav-items" title="汽车·船票">
				<a href="#">汽车·船票</a>
			</div>
			<div class="nav-items" title="专车·租车">
				<a href="#">专车·租车</a>
			</div>
		</div>
		<div class="nav-common">
			<div class="nav-items" title="旅游">
				<a href="#">旅游</a>
			</div>
			<div class="nav-items" title="高铁游">
				<a href="#">高铁游</a>
			</div>
			<div class="nav-items" title="邮轮游">
				<a href="#">邮轮游</a>
			</div>
			<div class="nav-items" title="定制游">
				<a href="#">定制游</a>
			</div>
		</div>
	</nav>
</body>
</html>